import { useEffect, useState } from "react"

export const UseEffect = () => {
  const [count, setCount] = useState(0)
  const [number, setNumber] = useState(0)
  useEffect(() => {
    document.title = `${count}`
  }, [count])
  return (
    <div>
      <h1>{count}</h1>
      <button onClick={() => setCount(count + 1)}>+1</button>
      {count > 3 ? null : <Child />}
      <hr />
      <h1>{number}</h1>
      <button onClick={() => setNumber(number + 1)}>+1</button>
    </div>
  )
}
const Child = () => {
  useEffect(() => {
    console.log('Effect');
    const handleResize = () => console.log('resize');
    window.addEventListener('resize', handleResize)
    return () => window.removeEventListener('resize', handleResize)
  }, [])
  return (
    <div>
      <h1>子</h1>
    </div>
  )
}